<template>
  <div v-show="showModal" class="my-modal c-flex-row c-flex-center">
    <div class="bg-masker" @click="closeModal" data-type='cancel'></div>
    <div class="my-content">
      <div class="top-bg">
        <span @click="closeModal" class="c-pa c-p-r0 c-p-t0 iconfont c-ph30 c-fs20 c-fc-white">&#xe61b;</span>
        <div class="c-pt30 c-flex-row c-flex-center">
          <img class="avatar-box c-ww60 c-hh60 c-brp50" :src="$addXossFilter(teacherAva)" alt="讲师头像" />
        </div>
        <div class="c-textAlign-c c-fs24 c-pt16 c-lh c-fc-white">
          {{teacherName}}
        </div>

      </div>

      <div class="c-textAlign-c c-fs20 c-lh c-fc-gray c-pt20 c-pb40 c-bd-b1">听说打赏我的人，都进了福布斯排行榜</div>
      <div class="c-flex-row c-flexw-wrap c-ph52 c-pv30" v-show="!otherMoney">
        <div class="width1-3 c-ph10 c-pv10 c-fs24" v-for="(item,index) in moneyArray" :key="index">
          <div @click="clickRewordItem(item)" :class="curChooseMoney == item ? 'reword-bg-red c-fc-white':'reword-fc-red'" class="c-w100 c-h c-flex-row c-pv16 c-flex-center c-br6 reword-bd-red">{{'￥' | iosPriceFilter}}{{item}}</div>
        </div>
      </div>
      <div v-show="!otherMoney" class="c-textAlign-c c-pb60 c-fs24 c-fc-sblack" @click="chooseOtherMoney">其他金额</div>
      <div class="c-pt60 c-flex-row c-flex-center" v-show="otherMoney">
        <div class="c-fs30 c-ph24">{{'￥' | iosPriceFilter}}</div>
        <input @blur="blurInput" id="inputReword" v-model="inputMoney" type="number" class="c-pv20 c-ph20 c-br10 c-w100 input needsclick" placeholder="0.1~1000">
      </div>
      <div @click="chooseOtherMoney" class="c-flex-row c-flex-center c-pt40 c-pb40 c-bd-b1" v-show="otherMoney">
        <span class="iconfont c-fs24 c-fc-sblack">&#xe7d1;</span>
        <span class="c-fs24 c-fc-sblack c-ph14">固定金额</span>
      </div>
      <div @click="clickRewordItem(inputMoney)" v-show="otherMoney" class="c-hh80 c-fs24 c-flex-row c-flex-center reword-fc-red">
        赞赏
      </div>
    </div>

  </div>
</template>

<script>
export default {
  components: {},
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    teacherAva: {
      type: String,
      default: "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epvhgOW5TyCHrib3xFqEw8xiaK9Mpctrb77YDcPOvQQFctm4UcL74LHKjibLUx6GZOYW6TUBawAjXiaXQ/132"
    },
    teacherName: {
      type: String,
      default: "老鹰"
    }
  },
  watch: {
    inputMoney(val) {
      if (val * 1 > 1000) {
        this.inputMoney = 1000;
      }
      let valStr = val + "";
      let valArr = valStr.split(".");
      if (valArr.length == 2 && valArr[1].toString().length > 2) {
        let poiintStr = valArr[1].toString().substring(0, 2);
        let resultNum = valArr[0] + "." + poiintStr;
        this.inputMoney = resultNum * 1;
      }
    }
  },
  data() {
    return {
      otherMoney: false,
      inputMoney: "",
      moneyArray: [1.68, 6.66, 8.88, 18.88, 99.99, 168.88],
      curChooseMoney: ""
    };
  },
  methods: {
    chooseOtherMoney() {
      this.otherMoney = !this.otherMoney;
      this.inputMoney = "";
      if (this.otherMoney) {
        console.log(document.getElementById("inputReword"))
        setTimeout(() => {
          document.getElementById("inputReword").focus();
        }, 100);
      }
    },
    //输入框失去焦点
    blurInput(e) {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = 0;
        });
      }
    },
    cancelOtherMoney() {
      this.otherMoney = false;
    },
    clickRewordItem(money) {
      this.curChooseMoney = money;
      if (money * 1 >= 0.1 && money * 1 <= 1000) {
        setTimeout(() => {
          this.$emit("chooseMoney", money * 1);
          this.curChooseMoney = "";
        }, 300);
        this.otherMoney = false;
        this.inputMoney = "";
      } else {
        this.$showCjToast({
          text: "请输入0.1-1000之间的金额",
          type: "warn",
          time: 1500
        });
      }
    },
    closeModal(e) {
      this.otherMoney = false;
      this.inputMoney = "";
      this.$emit("closeRewordModal");
    }
  },
  activated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  padding-top: 3rem;
}

.bg-masker {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.my-content {
  z-index: 1;
  width: 15rem;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.width1-3 {
  width: 33.33333333333%;
}

.reword-bd-red {
  border: 1px solid #fc583d;
}

.reword-fc-red {
  color: #fc583d;
}

.reword-bg-red {
  background-color: #fc583d;
}

.input {
  background: none;
  outline: none;
  border: none;
  width: 4.5rem;
  padding: 10px 0;
  font-size: 0.9rem;
}

.input:focus {
  outline: none;
}

.top-bg {
  position: relative;
  width: 100%;
  height: 3.83rem;
  text-align: center;
  line-height: 50px;
}
.top-bg:after {
  width: 100%;
  height: 3.83rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  content: "";
  border-radius: 0 0 50% 50%;
  background: linear-gradient(#dd563f, #dd563f);
}

.avatar-box {
  border: 2px solid rgba(255, 255, 255, 0.7);
}
</style>
